<template>
  <el-container
    style="position: relative; height: 90vh; display: flex; margin: 8px"
  >
    <el-header class="el-header_1 flex flex-between">
      <div style="height: 100%; text-align: center">
        <el-text size="large">lyh的助学平台</el-text>
      </div>
      <div class="flex gap-30 flex-center">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-icon size="28">
              <Message />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>我发布的课程</el-dropdown-item>
              <el-dropdown-item>学生成绩总览</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-icon size="28">
              <ChatDotSquare />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>消息</el-dropdown-item>
              <el-dropdown-item>回复</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-icon size="28">
              <Setting />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>签到</el-dropdown-item>
              <el-dropdown-item @click.native="outlogin">登出</el-dropdown-item>
              <el-dropdown-item>个人中心</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px" style="height: 100%">
        <div class="aside_div_css">
          <img
            class="aside_div_img_css"
            src="@/assets/main/avatar.jpg"
            alt="图片走丢啦"
          />
          <p class="aside_div_p_css">{{ this.username }}</p>
        </div>
        <el-menu
          router
          default-active="2"
          class="el-menu-vertical-demo"
          style="width: 200px"
        >
          <el-menu-item index="home">
            <el-icon>
              <Position />
            </el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <el-menu-item index="course">
            <el-icon>
              <Odometer />
            </el-icon>
            <span slot="title">课程</span>
          </el-menu-item>

          <el-menu-item index="product">
            <el-icon>
              <TrophyBase />
            </el-icon>
            <span slot="title">以产促学</span>
          </el-menu-item>

          <el-menu-item index="notes">
            <el-icon>
              <EditPen />
            </el-icon>
            <span slot="title">错题与讨论</span>
          </el-menu-item>
          <el-menu-item index="discussion">
            <el-icon>
              <Reading />
            </el-icon>
            <span slot="title">问题与讨论</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { fetchReturName } from "@/api/index";
export default {
  data() {
    return {
      username: "",
      showIcon: false,
    };
  },
  mounted() {
    fetchReturName().then((res) => {
      //console.log(res.data.data);
      this.username = res.data.data.name;
      if (res.data.data.permissions == 1) {
        this.showIcon = true;
      }
    });
  },
  methods: {
    outlogin() {
      window.sessionStorage.clear();
      this.$router.push("login");
    },
    mes() {
      this.$router.push("10");
    },
    mes1() {
      this.$router.push("teacher");
    },
    skip() {
      this.$router.push("mycourse");
    },
  },
};
</script>

<style scoped>
.el-header_1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  text-align: center;
  line-height: 60px;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  font-family: "STSong";
  border-bottom: solid 1px #dcdfe6;
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2);
}

.el-aside {
  text-align: center;
  line-height: 200px;
  position: absolute;
  top: 60px;
  left: 0;
  height: 100%;
  width: 200px;
  bottom: 0;
  border-right: solid 1px #dcdfe6;
  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.2);
}

.el-aside::-webkit-scrollbar {
  display: none;
}

.el-main {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 200px;
  right: 0;
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  overflow: auto;
  height: 90vh;
}

.el-main::-webkit-scrollbar {
  display: none;
}

.aside_div_css {
  height: 150px;
  position: relative;
  overflow: hidden;
}

.aside_div_img_css {
  display: block;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  margin: 40px auto 20px;
}

.aside_div_p_css {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  margin-bottom: 4px;
}
</style>
